<template>
  <div class="tile">
    <el-collapse :model-value="['2']">
      <el-collapse-item title="监控面板(仅用于调试)" name="1"
        ><debugInfoInput
          style="max-height: 250px; overflow: auto"
          :tileId="tileId"
        ></debugInfoInput>
      </el-collapse-item>
      <el-collapse-item name="2">
        <template #title>
          模型加载参数<el-button
            size="small"
            style="margin-left: 10px"
            @click.stop="saveData"
            >保存修改</el-button
          >
          <el-button
            size="small"
            style="margin-left: 10px"
            @click.stop="onFlyTo"
            >定位</el-button
          >
        </template>
        <tileInput
          style="max-height: 250px; overflow: auto"
          ref="tileInputRef"
          :tileId="tileId"
        ></tileInput>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup>
import {
  onMounted,
  onUnmounted,
  defineProps,
  defineEmits,
  defineExpose,
  ref,
  reactive,
  computed,
} from "vue";
import { getTileById } from "../../../../../static/CIM/BQGIS-load/index";
import SvgIcon from "../../../../components/SvgIcon.vue";
import { ElMessage } from "element-plus";
import tileInput from "./components/tileInput.vue";
import debugInfoInput from "./components/debugInfoInput.vue";
import { useLayerStore } from "../../../../store/layer";
import { useStore } from "../../../../store/store";
import { updateLayerdataJson } from "../../../../api/system.js";
import * as tileStore from "../../../../api/tileStore";
// const emit = defineEmits(["update:modelValue", false]);

const layerStore = useLayerStore();
const store = useStore();
const props = defineProps({
  tileId: {
    type: String,
  },
});

const tileId = props.tileId.substr(14);
let currentLayer = getTileById(tileId);
let layerData;
setLayerData();

function setLayerData() {
  for (let i = 0; i < layerStore.treeData.length; i++) {
    if (layerStore.treeData[i].children) {
      const layers = layerStore.treeData[i].children;
      for (let i = 0; i < layers.length; i++) {
        if (layers[i].id === tileId) {
          layerData = layers[i];
          break;
        }
      }
      if (layerData) break;
    }
  }
}

const tileInputRef = ref();

async function saveData() {
  if (window.sessionStorage.getItem("sceneId")) {
    const param = tileStore.get(tileId);
    tileStore.set(tileInputRef.value.inputData);
  } else if (store.loginInfo.isroot == 0) {
    const inputData = { ...tileInputRef.value.inputData };
    if (inputData && layerData) {
      try {
        const json = layerData.json ? JSON.parse(layerData.json) : {};
        json.loadConfig = inputData;
        const res = await updateLayerdataJson({
          id: tileId,
          json: JSON.stringify(json),
        });
        ElMessage({
          message: res.msg,
        });
      } catch (error) {
        console.error(error);
        ElMessage({
          message: "修改失败",
          type: "warning",
        });
      }
    }
  }
}

function onFlyTo() {
  if (currentLayer) {
    currentLayer.flyTo();
  }
}

function openInfoPopup() {
  viewer.viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin);
}
</script>


<style lang="scss" scoped>
.tile {
  height: 400px;
  width: 450px;
  overflow: auto;
  padding: 10px;
  font-size: 14px;
}
.collapse-title {
  display: flex;
  align-items: center;
}
:deep(.el-collapse) {
  border-color: transparent;
  width: 440px;
}
:deep(.el-collapse-item__header) {
  background-color: #000;
  border-color: transparent;
  padding-left: 5px;
  color: #fff;
}
:deep(.el-collapse-item__wrap) {
  background-color: rgba($color: #000, $alpha: 0.4);
  border-color: transparent;
  padding-left: 10px;
  color: #fff;
}
</style>